<template>
  <div class="care-code-manage-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="page-title gradient-text">卡密管理</h2>
      <p class="page-subtitle">管理系统中的所有卡密信息</p>
    </div>

    <!-- 操作工具栏 -->
    <div class="toolbar glass">
      <a-space size="large">
        <!-- 生成卡密 -->
        <a-button 
          type="primary" 
          :icon="h(PlusOutlined)" 
          @click="showGenerateModal = true"
          class="action-button"
        >
          生成卡密
        </a-button>
        
        <!-- 刷新 -->
        <a-button 
          :icon="h(ReloadOutlined)" 
          @click="loadCareCodeList"
          :loading="loading"
        >
          刷新
        </a-button>
      </a-space>
    </div>

    <!-- 搜索筛选 -->
    <div class="search-form glass">
      <a-form layout="inline" :model="searchParams" @finish="handleSearch">
        <a-form-item label="卡密类型">
          <a-select 
            v-model:value="searchParams.careCodeType" 
            placeholder="选择卡密类型"
            allowClear
            style="width: 120px"
          >
            <a-select-option value="DC">天卡</a-select-option>
            <a-select-option value="WC">周卡</a-select-option>
            <a-select-option value="MC">月卡</a-select-option>
            <a-select-option value="YC">年卡</a-select-option>
            <a-select-option value="FC">永久卡</a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label="卡密级别">
          <a-select 
            v-model:value="searchParams.careCodeLevel" 
            placeholder="选择卡密级别"
            allowClear
            style="width: 120px"
          >
            <a-select-option value="1">VIP</a-select-option>
            <a-select-option value="2">SVIP</a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label="使用状态">
          <a-select 
            v-model:value="searchParams.isUsed" 
            placeholder="选择使用状态"
            allowClear
            style="width: 120px"
          >
            <a-select-option value="0">未使用</a-select-option>
            <a-select-option value="1">已使用</a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label="封禁状态">
          <a-select 
            v-model:value="searchParams.isBanned" 
            placeholder="选择封禁状态"
            allowClear
            style="width: 120px"
          >
            <a-select-option value="0">正常</a-select-option>
            <a-select-option value="1">已封禁</a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label="卡密">
          <a-input 
            v-model:value="searchParams.careCode" 
            placeholder="输入卡密"
            style="width: 200px"
          />
        </a-form-item>
        
        <a-form-item>
          <a-space>
            <a-button type="primary" html-type="submit" :loading="loading">
              搜索
            </a-button>
            <a-button @click="resetSearch">重置</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </div>

    <!-- 卡密列表 -->
    <div class="table-container glass">
      <a-table
        :columns="columns"
        :data-source="careCodeList"
        :pagination="pagination"
        :loading="loading"
        row-key="id"
        @change="handleTableChange"
        :scroll="{ x: 1200 }"
      >
        <!-- 卡密类型 -->
        <template #careCodeType="{ record }">
          <a-tag :color="getCareCodeTypeColor(record.careCodeType)">
            {{ getCareCodeTypeName(record.careCodeType) }}
          </a-tag>
        </template>
        
        <!-- 卡密级别 -->
        <template #careCodeLevel="{ record }">
          <a-tag :color="record.careCodeLevel === '1' ? 'gold' : 'purple'">
            {{ record.careCodeLevel === '1' ? 'VIP' : 'SVIP' }}
          </a-tag>
        </template>
        
        <!-- 卡密 -->
        <template #careCode="{ record }">
          <div class="care-code-cell">
            <span class="care-code-text">{{ hideCareCode(record.careCode) }}</span>
            <a-button 
              type="link" 
              size="small" 
              @click="copyToClipboard(record.careCode)"
              :icon="h(CopyOutlined)"
            >
              复制
            </a-button>
          </div>
        </template>
        
        <!-- 使用状态 -->
        <template #isUsed="{ record }">
          <a-tag :color="record.isUsed === 0 ? 'green' : 'orange'">
            {{ record.isUsed === 0 ? '未使用' : '已使用' }}
          </a-tag>
        </template>
        
        <!-- 封禁状态 -->
        <template #isBanned="{ record }">
          <a-tag :color="record.isBanned === 0 ? 'green' : 'red'">
            {{ record.isBanned === 0 ? '正常' : '已封禁' }}
          </a-tag>
        </template>
        
        <!-- 时间 -->
        <template #createTime="{ record }">
          {{ formatDate(record.createTime) }}
        </template>
        
        <template #useTime="{ record }">
          {{ record.useTime ? formatDate(record.useTime) : '-' }}
        </template>
        
        <!-- 操作 -->
        <template #action="{ record }">
          <a-space>
            <a-tooltip title="查看使用用户">
              <a-button 
                type="link" 
                size="small"
                :disabled="record.isUsed === 0"
                @click="viewUser(record)"
                :icon="h(UserOutlined)"
              />
            </a-tooltip>
            
            <a-tooltip :title="getBanTooltip(record)">
              <a-button 
                type="link" 
                size="small"
                :disabled="record.isUsed === 1"
                @click="toggleBan(record)"
                :icon="h(record.isBanned === 0 ? StopOutlined : CheckOutlined)"
                :class="[
                  record.isBanned === 0 ? 'ban-button' : 'unban-button',
                  { 'disabled-button': record.isUsed === 1 }
                ]"
              />
            </a-tooltip>
            
            <a-tooltip :title="getDeleteTooltip(record)">
              <a-button 
                type="link" 
                size="small"
                danger
                :disabled="record.isUsed === 1 || record.isBanned === 1"
                @click="deleteCareCode(record)"
                :icon="h(DeleteOutlined)"
                :class="{ 'disabled-button': record.isUsed === 1 || record.isBanned === 1 }"
              />
            </a-tooltip>
          </a-space>
        </template>
      </a-table>
    </div>

    <!-- 生成卡密弹窗 -->
    <a-modal
      v-model:open="showGenerateModal"
      title="生成卡密"
      @ok="handleGenerate"
      @cancel="resetGenerateForm"
      :confirm-loading="generateLoading"
    >
      <a-form :model="generateForm" layout="vertical">
        <a-form-item label="卡密类型" name="careCodeType" :rules="[{ required: true, message: '请选择卡密类型' }]">
          <a-select v-model:value="generateForm.careCodeType" placeholder="选择卡密类型">
            <a-select-option value="DC">天卡 (1天)</a-select-option>
            <a-select-option value="WC">周卡 (7天)</a-select-option>
            <a-select-option value="MC">月卡 (30天)</a-select-option>
            <a-select-option value="YC">年卡 (365天)</a-select-option>
            <a-select-option value="FC">永久卡 (100年)</a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label="卡密级别" name="careCodeLevel" :rules="[{ required: true, message: '请选择卡密级别' }]">
          <a-select v-model:value="generateForm.careCodeLevel" placeholder="选择卡密级别">
            <a-select-option value="1">VIP</a-select-option>
            <a-select-option value="2">SVIP</a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label="生成数量" name="careCodeCount" :rules="[{ required: true, message: '请输入生成数量' }]">
          <a-input-number 
            v-model:value="generateForm.careCodeCount" 
            :min="1" 
            :max="100" 
            placeholder="输入生成数量"
            style="width: 100%"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 用户信息弹窗 -->
    <a-modal
      v-model:open="showUserModal"
      title="卡密使用用户信息"
      width="500px"
    >
      <div v-if="currentUser" class="user-info">
        <a-descriptions :column="1" bordered>
          <a-descriptions-item label="用户ID">{{ currentUser.id }}</a-descriptions-item>
          <a-descriptions-item label="用户账号">{{ currentUser.userAccount }}</a-descriptions-item>
          <a-descriptions-item label="用户名">{{ currentUser.userName }}</a-descriptions-item>
          <a-descriptions-item label="用户角色">
            <a-tag :color="currentUser.userRole === 'admin' ? 'red' : 'blue'">
              {{ currentUser.userRole === 'admin' ? '管理员' : '普通用户' }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="用户状态">
            <a-tag :color="(currentUser.isBanned ?? 0) === 0 ? 'green' : 'red'">
              {{ (currentUser.isBanned ?? 0) === 0 ? '正常' : '已封禁' }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="注册时间">{{ formatDate(currentUser.createTime) }}</a-descriptions-item>
        </a-descriptions>
      </div>
      
      <template #footer>
        <div class="user-modal-footer">
          <a-space>
            <a-button @click="showUserModal = false">关闭</a-button>
            <a-button 
              v-if="currentUser && (currentUser.isBanned ?? 0) === 0"
              type="primary"
              danger
              @click="banCurrentUser"
              :loading="userActionLoading"
              :icon="h(StopOutlined)"
            >
              封禁用户
            </a-button>
            <a-button 
              v-if="currentUser && currentUser.isBanned === 1"
              type="primary"
              @click="unbanCurrentUser"
              :loading="userActionLoading"
              :icon="h(CheckOutlined)"
            >
              解封用户
            </a-button>
          </a-space>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, h } from 'vue'
import { message } from 'ant-design-vue'
import {
  PlusOutlined,
  ReloadOutlined,
  CopyOutlined,
  UserOutlined,
  StopOutlined,
  CheckOutlined,
  DeleteOutlined
} from '@ant-design/icons-vue'
import { 
  generateCareCodeUsingPost,
  queryCareCodeListUsingPost,
  getUserByCardCodeUsingPost,
  banCardSecretUsingPost,
  unbanCardSecretUsingPost,
  deleteCareCodeUsingPost
} from '@/api/careCodeController'
import { 
  userBannedUsingPost,
  userUnBannedUsingPost
} from '@/api/userController'

// 响应式数据
const loading = ref(false)
const generateLoading = ref(false)
const userActionLoading = ref(false)
const showGenerateModal = ref(false)
const showUserModal = ref(false)
const careCodeList = ref<API.CareCode[]>([])
const currentUser = ref<API.UserVO | null>(null)

// 搜索参数
const searchParams = reactive({
  careCodeType: undefined,
  careCodeLevel: undefined,
  isUsed: undefined,
  isBanned: undefined,
  careCode: undefined,
  current: 1,
  pageSize: 10,
  sortField: 'createTime',
  sortOrder: 'descend'
})

// 生成卡密表单
const generateForm = reactive({
  careCodeType: undefined,
  careCodeLevel: undefined,
  careCodeCount: 1
})

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条数据`
})

// 表格列配置
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: 80
  },
  {
    title: '卡密类型',
    dataIndex: 'careCodeType',
    key: 'careCodeType',
    width: 100,
    slots: { customRender: 'careCodeType' }
  },
  {
    title: '卡密级别',
    dataIndex: 'careCodeLevel',
    key: 'careCodeLevel',
    width: 100,
    slots: { customRender: 'careCodeLevel' }
  },
  {
    title: '卡密',
    dataIndex: 'careCode',
    key: 'careCode',
    width: 200,
    slots: { customRender: 'careCode' }
  },
  {
    title: '时效(天)',
    dataIndex: 'validityPeriod',
    key: 'validityPeriod',
    width: 80
  },
  {
    title: '使用状态',
    dataIndex: 'isUsed',
    key: 'isUsed',
    width: 100,
    slots: { customRender: 'isUsed' }
  },
  {
    title: '封禁状态',
    dataIndex: 'isBanned',
    key: 'isBanned',
    width: 100,
    slots: { customRender: 'isBanned' }
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 120,
    slots: { customRender: 'createTime' }
  },
  {
    title: '使用时间',
    dataIndex: 'useTime',
    key: 'useTime',
    width: 120,
    slots: { customRender: 'useTime' }
  },
  {
    title: '操作',
    key: 'action',
    width: 120,
    fixed: 'right',
    slots: { customRender: 'action' }
  }
]

// 方法
const loadCareCodeList = async () => {
  loading.value = true
  try {
    const res = await queryCareCodeListUsingPost({
      ...searchParams,
      current: pagination.current,
      pageSize: pagination.pageSize
    })
    
    if (res.data.code === 0) {
      careCodeList.value = res.data.data?.records || []
      pagination.total = res.data.data?.total || 0
    } else {
      message.error(res.data.message || '获取卡密列表失败')
    }
  } catch (error) {
    console.error('获取卡密列表失败:', error)
    message.error('获取卡密列表失败')
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  pagination.current = 1
  loadCareCodeList()
}

const resetSearch = () => {
  Object.assign(searchParams, {
    careCodeType: undefined,
    careCodeLevel: undefined,
    isUsed: undefined,
    isBanned: undefined,
    careCode: undefined,
    current: 1,
    pageSize: 10,
    sortField: 'createTime',
    sortOrder: 'descend'
  })
  pagination.current = 1
  loadCareCodeList()
}

const handleTableChange = (pag: any) => {
  pagination.current = pag.current
  pagination.pageSize = pag.pageSize
  loadCareCodeList()
}

const handleGenerate = async () => {
  if (!generateForm.careCodeType || !generateForm.careCodeLevel || !generateForm.careCodeCount) {
    message.error('请填写完整信息')
    return
  }
  
  generateLoading.value = true
  try {
    const res = await generateCareCodeUsingPost({
      careCodeCount: generateForm.careCodeCount,
      careCodeType: generateForm.careCodeType,
      careCodeLevel: generateForm.careCodeLevel
    })
    
    if (res.data.code === 0) {
      message.success(`成功生成 ${generateForm.careCodeCount} 个卡密`)
      showGenerateModal.value = false
      resetGenerateForm()
      loadCareCodeList()
    } else {
      message.error(res.data.message || '生成卡密失败')
    }
  } catch (error) {
    console.error('生成卡密失败:', error)
    message.error('生成卡密失败')
  } finally {
    generateLoading.value = false
  }
}

const resetGenerateForm = () => {
  Object.assign(generateForm, {
    careCodeType: undefined,
    careCodeLevel: undefined,
    careCodeCount: 1
  })
}

const viewUser = async (record: API.CareCode) => {
  try {
    const res = await getUserByCardCodeUsingPost({
      CareCode: record.careCode || ''
    })
    
    if (res.data.code === 0) {
      currentUser.value = res.data.data || null
      showUserModal.value = true
    } else {
      message.error(res.data.message || '获取用户信息失败')
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    message.error('获取用户信息失败')
  }
}

const toggleBan = async (record: API.CareCode) => {
  const isBan = record.isBanned === 0
  const action = isBan ? '封禁' : '解封'
  
  try {
    const res = isBan 
      ? await banCardSecretUsingPost({ CareCode: record.careCode || '' })
      : await unbanCardSecretUsingPost({ CareCode: record.careCode || '' })
    
    if (res.data.code === 0) {
      message.success(`${action}成功`)
      loadCareCodeList()
    } else {
      message.error(res.data.message || `${action}失败`)
    }
  } catch (error) {
    console.error(`${action}失败:`, error)
    message.error(`${action}失败`)
  }
}

const deleteCareCode = async (record: API.CareCode) => {
  try {
    const res = await deleteCareCodeUsingPost({
      CareCode: record.careCode || ''
    })
    
    if (res.data.code === 0) {
      message.success('删除成功')
      loadCareCodeList()
    } else {
      message.error(res.data.message || '删除失败')
    }
  } catch (error) {
    console.error('删除失败:', error)
    message.error('删除失败')
  }
}

// 工具方法
const getCareCodeTypeColor = (type: string) => {
  const colors: Record<string, string> = {
    'DC': 'blue',
    'WC': 'green',
    'MC': 'orange',
    'YC': 'red',
    'FC': 'purple'
  }
  return colors[type] || 'default'
}

const getCareCodeTypeName = (type: string) => {
  const names: Record<string, string> = {
    'DC': '天卡',
    'WC': '周卡',
    'MC': '月卡',
    'YC': '年卡',
    'FC': '永久卡'
  }
  return names[type] || type
}

const hideCareCode = (careCode: string) => {
  if (!careCode) return ''
  if (careCode.length <= 8) return careCode
  return careCode.substring(0, 4) + '****' + careCode.substring(careCode.length - 4)
}

const copyToClipboard = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text)
    message.success('复制成功')
  } catch (error) {
    console.error('复制失败:', error)
    message.error('复制失败')
  }
}

const formatDate = (dateStr?: string) => {
  if (!dateStr) return '-'
  return new Date(dateStr).toLocaleString('zh-CN')
}

const getBanTooltip = (record: API.CareCode) => {
  if (record.isUsed === 1) {
    return '已使用的卡密无法封禁'
  }
  return record.isBanned === 0 ? '封禁卡密' : '解封卡密'
}

const getDeleteTooltip = (record: API.CareCode) => {
  if (record.isUsed === 1) {
    return '已使用的卡密无法删除'
  }
  if (record.isBanned === 1) {
    return '已封禁的卡密无法删除'
  }
  return '删除卡密'
}

// 封禁当前查看的用户
const banCurrentUser = async () => {
  if (!currentUser.value?.userAccount) {
    message.error('用户账号不能为空')
    return
  }
  
  userActionLoading.value = true
  try {
    const res = await userBannedUsingPost([currentUser.value.userAccount])
    
    if (res.data.code === 0) {
      message.success('用户封禁成功')
      // 更新当前用户状态
      if (currentUser.value) {
        currentUser.value.isBanned = 1
      }
    } else {
      message.error('封禁失败：' + res.data.message)
    }
  } catch (error) {
    console.error('封禁用户失败:', error)
    message.error('封禁用户失败')
  } finally {
    userActionLoading.value = false
  }
}

// 解封当前查看的用户
const unbanCurrentUser = async () => {
  if (!currentUser.value?.userAccount) {
    message.error('用户账号不能为空')
    return
  }
  
  userActionLoading.value = true
  try {
    const res = await userUnBannedUsingPost([currentUser.value.userAccount])
    
    if (res.data.code === 0) {
      message.success('用户解封成功')
      // 更新当前用户状态
      if (currentUser.value) {
        currentUser.value.isBanned = 0
      }
    } else {
      message.error('解封失败：' + res.data.message)
    }
  } catch (error) {
    console.error('解封用户失败:', error)
    message.error('解封用户失败')
  } finally {
    userActionLoading.value = false
  }
}

// 生命周期
onMounted(() => {
  loadCareCodeList()
})
</script>

<style scoped>
.care-code-manage-page {
  padding: 24px;
  min-height: 100vh;
  background: linear-gradient(135deg, 
    var(--primary-gradient-start) 0%, 
    var(--primary-gradient-end) 100%);
}

/* 深色模式适配 */
.dark .care-code-manage-page {
  background: linear-gradient(135deg, 
    var(--dark-bg-primary) 0%, 
    var(--dark-bg-secondary) 100%);
}

.page-header {
  margin-bottom: 24px;
  text-align: center;
}

.page-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
}

.page-subtitle {
  font-size: 16px;
  opacity: 0.8;
  margin: 0;
}

.gradient-text {
  background: linear-gradient(45deg, #6366f1, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.dark .glass {
  background: rgba(30, 30, 30, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.toolbar {
  margin-bottom: 16px;
  padding: 16px 24px;
}

.action-button {
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  border: none;
  border-radius: 8px;
  height: 40px;
  font-weight: 600;
}

.search-form {
  margin-bottom: 16px;
  padding: 20px 24px;
}

.table-container {
  padding: 24px;
}

.care-code-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.care-code-text {
  font-family: 'Courier New', monospace;
  font-weight: 600;
}

.ban-button {
  color: #ff4d4f !important;
}

.unban-button {
  color: #52c41a !important;
}

.disabled-button {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

.user-info {
  padding: 16px 0;
}

/* 黑色模式表格适配 */
.dark .table-container :deep(.ant-table) {
  background: rgba(30, 30, 30, 0.8);
  color: #ffffff;
}

.dark .table-container :deep(.ant-table-thead > tr > th) {
  background: rgba(40, 40, 40, 0.9);
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark .table-container :deep(.ant-table-tbody > tr > td) {
  background: rgba(30, 30, 30, 0.8);
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.dark .table-container :deep(.ant-table-tbody > tr:hover > td) {
  background: rgba(40, 40, 40, 0.8);
}

.dark .table-container :deep(.ant-pagination) {
  color: #ffffff;
}

.dark .table-container :deep(.ant-pagination .ant-pagination-item) {
  background: rgba(40, 40, 40, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

.dark .table-container :deep(.ant-pagination .ant-pagination-item a) {
  color: #ffffff;
}

.dark .table-container :deep(.ant-pagination .ant-pagination-item:hover) {
  background: rgba(60, 60, 60, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
}

.dark .table-container :deep(.ant-pagination .ant-pagination-item-active) {
  background: #6366f1;
  border-color: #6366f1;
}

/* 黑色模式表单适配 */
.dark .search-form :deep(.ant-form-item-label > label) {
  color: #ffffff;
}

.dark .search-form :deep(.ant-select-selector) {
  background: rgba(40, 40, 40, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.dark .search-form :deep(.ant-select-arrow) {
  color: #ffffff;
}

.dark .search-form :deep(.ant-input) {
  background: rgba(40, 40, 40, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.dark .search-form :deep(.ant-btn:not(.ant-btn-primary)) {
  background: rgba(40, 40, 40, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* 黑色模式模态框适配 */
.dark :deep(.ant-modal-content) {
  background: rgba(30, 30, 30, 0.95);
  color: #ffffff;
}

.dark :deep(.ant-modal-header) {
  background: rgba(40, 40, 40, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark :deep(.ant-modal-title) {
  color: #ffffff;
}

.dark :deep(.ant-modal-body) {
  color: #ffffff;
}

.dark :deep(.ant-modal-footer) {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* 黑色模式标签适配 */
.dark .care-code-text {
  color: #ffffff;
}

.dark .page-subtitle {
  color: rgba(255, 255, 255, 0.8);
}

.dark .user-info {
  color: #ffffff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .care-code-manage-page {
    padding: 16px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .toolbar {
    padding: 12px 16px;
  }
  
  .search-form {
    padding: 16px;
  }
  
  .table-container {
    padding: 16px;
  }
}
</style>
